<template>
  <el-tabs type="border-card" style="heigt:100%">
    <!-- 可视对讲设备报警记录 -->
    
      <el-tab-pane label="可视对讲设备报警记录">
        <div style="margin-bottom:15px">
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          
          <el-button
            style="float: right; margin-bottom:15px; margin-right:15px"
            @click="handleSwingCardRecordForm()"
            type="primary"
            size="small">
            查询记录
          </el-button>
        </div>
        <div>
          <el-form inline v-model="logAlarmForm" size="small">
            <el-form-item label="处理状态"  >
              <el-input v-model="logAlarmForm.handleStat" style="width:203px"></el-input>
            </el-form-item>
            <el-form-item label="报警类型"  >
              <el-input v-model="logAlarmForm.alarmType" style="width:203px"></el-input>
            </el-form-item>
            <el-form-item label="报警设备编码"  >
              <el-input v-model="logAlarmForm.deviceCode" style="width:203px"></el-input>
            </el-form-item>
            <el-form-item label="查询起始时间"  >
              <el-date-picker v-model="logAlarmForm.startTime"  type="date" placeholder="选择起始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width:203px" > 
               </el-date-picker>
            </el-form-item>
            <el-form-item label="查询截至时间"  >
               <el-date-picker v-model="logAlarmForm.endTime"  type="date" placeholder="选择起始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width:203px" > 
               </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      <div>
        <el-divider></el-divider>
        <i class="el-icon-tickets"></i>
        <span> 报警记录列表</span>
        <el-table :data="logAlarmResult.pageData" border style="width: 100%;margin-top:15px">
          
          <el-table-column  fixed prop="id" label="报警记录id"></el-table-column>
          <el-table-column  prop="alarmData" label="报警时间"></el-table-column>
          <el-table-column  prop="alarmGrade" label="报警等级"></el-table-column>
          <el-table-column  prop="alarmGradeStr" label="报警等级翻译"></el-table-column>
          <el-table-column  prop="alarmPicture" label="报警图片"></el-table-column>
          <el-table-column  prop="alarmStat" label="报警状态"></el-table-column>
          <el-table-column  prop="alarmType" label="报警类型"></el-table-column>
          <el-table-column  prop="alarmTypeStr" label="报警类型翻译"></el-table-column>
          <el-table-column  prop="callNum" label="呼叫号码"></el-table-column>
          <el-table-column  prop="channelName" label="通道名称"></el-table-column>
          <el-table-column  prop="channelSeq" label="通道序号"></el-table-column>
          <el-table-column  prop="deviceCode" label="设备编码"></el-table-column>
          <el-table-column  prop="deviceName" label="设备名称"></el-table-column>
          <el-table-column  prop="handleStat" label="处理状态"></el-table-column>
          <el-table-column  prop="handleStatStr" label="处理状态翻译"></el-table-column>

        </el-table>
      </div>
    </el-tab-pane>
    <!--可视对讲设备开门记录  -->
    <el-tab-pane label="可视对讲设备开门记录">
      <div style="margin-bottom:15px">
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          
          <el-button
            style="float: right; margin-bottom:15px; margin-right:15px"
            @click="handleSwingCardRecordForm()"
            type="primary"
            size="small">
            查询记录
          </el-button>
        </div>
        <div>
          <el-form inline v-model="logOpendoorForm" size="small">
            <el-form-item label="设备编码"  >
              <el-input v-model="logOpendoorForm.deviceCode" style="width:203px"></el-input>
            </el-form-item>
            <el-form-item label="开门方式"  >
              <el-input v-model="logOpendoorForm.openTypes" style="width:203px"></el-input>
            </el-form-item>
            <el-form-item label="卡号"  >
              <el-input v-model="logOpendoorForm.cardNum" style="width:203px"></el-input>
            </el-form-item>
            <el-form-item label="查询起始时间"  >
              <el-date-picker v-model="logOpendoorForm.startTime"  type="date" placeholder="选择起始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width:203px" > 
               </el-date-picker>
            </el-form-item>
            <el-form-item label="查询截至时间"  >
               <el-date-picker v-model="logOpendoorForm.endTime"  type="date" placeholder="选择起始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width:203px" > 
               </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      <div>
        <el-divider></el-divider>
        <i class="el-icon-tickets"></i>
        <span> 开门记录列表</span>
        <el-table :data="logOpendoorResult.pageData" border style="width: 100%;margin-top:15px">
          
          <el-table-column  fixed prop="id" label="报警记录id"></el-table-column>
          <el-table-column  prop="cardNumber" label="卡号"></el-table-column>
          <el-table-column  prop="cannelName" label="卡类型"></el-table-column>
          <el-table-column  prop="cannelSeq" label="通道名称"></el-table-column>
          <el-table-column  prop="deviceCode" label="设备编码"></el-table-column>
          <el-table-column  prop="deviceName" label="设备名称"></el-table-column>
          <el-table-column  prop="deviceType" label="设备类型"></el-table-column>
          <el-table-column  prop="openResult" label="看门结果"></el-table-column>
          <el-table-column  prop="openResultStr" label="开门结果翻译"></el-table-column>
          <el-table-column  prop="openType" label="开门方式"></el-table-column>
          <el-table-column  prop="openTypeStr" label="开门方式翻译"></el-table-column>
          <el-table-column  prop="ownerCode" label="组织编码"></el-table-column>
          <el-table-column  prop="swipeId" label="刷卡人"></el-table-column>
          <el-table-column  prop="swipeName" label="刷卡人姓名"></el-table-column>
          <el-table-column  prop="swipeTime" label="刷卡时间"></el-table-column>
          <el-table-column  prop="unitSeq" label="单元序号"></el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
    <el-tab-pane label="通话记录查询">
      <!-- 可视对讲通话记录查询 -->
      <div style="margin-bottom:15px">
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          
          <el-button
            style="float: right; margin-bottom:15px; margin-right:15px"
            @click="handleSwingCardRecordForm()"
            type="primary"
            size="small">
            查询记录
          </el-button>
        </div>
        <div>
          <el-form inline v-model="logTalkForm" size="small">
            <el-form-item label="呼叫号码"  >
              <el-input v-model="logTalkForm.deviceCode" style="width:203px"></el-input>
            </el-form-item>
            <el-form-item label="最终状态"  >
              <el-input v-model="logTalkForm.endState" style="width:203px"></el-input>
            </el-form-item>
            <el-form-item label="呼叫方式"  >
              <el-input v-model="logTalkForm.callType" style="width:203px"></el-input>
            </el-form-item>
            <el-form-item label="查询起始时间"  >
              <el-date-picker v-model="logOpendoorForm.startTime"  type="date" placeholder="选择起始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width:203px" > 
               </el-date-picker>
            </el-form-item>
            <el-form-item label="查询截至时间"  >
               <el-date-picker v-model="logOpendoorForm.endTime"  type="date" placeholder="选择起始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width:203px" > 
               </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      <div>
        <el-divider></el-divider>
        <i class="el-icon-tickets"></i>
        <span> 通话记录列表</span>
        <el-table :data="logTalkResult.pageData" border style="width: 100%;margin-top:15px">
          
          <el-table-column  fixed prop="id" label="通话记录id"></el-table-column>
          <el-table-column  prop="callingParty" label="主叫方"></el-table-column>
          <el-table-column  prop="calledParty" label="被叫方"></el-table-column>
          <el-table-column  prop="callTime" label="呼叫时间"></el-table-column>
          <el-table-column  prop="endState" label="最终状态"></el-table-column>
          <el-table-column  prop="endStateStr" label="最终状态解释"></el-table-column>
          <el-table-column  prop="talkTime" label="通话时间"></el-table-column>
          <el-table-column  prop="picturePath" label="图片"></el-table-column>
          <el-table-column  prop="recordId" label="记录ID"></el-table-column>
          <el-table-column  prop="deviceName" label="设备名称"></el-table-column>
          <el-table-column  prop="status" label="状态"></el-table-column>
          <el-table-column  prop="secTalkTime" label="通话时长"></el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
export default {
  data() {
    return {
      logAlarmForm: {
        pageNum:1,
        pageSize:20,
        handleStat: 0,
        alarmType:1,
        deviceCode:'',
        startTime:'',
        entTime:''
      },
      logAlarmResult:{
        currentPage:1,
        pageData:[{
                  alarmDate:1481872181000,
                  alarmGrade:1,
                  alarmGradeStr:"等级一",
                  alarmPicture:"",
                  alarmStat:2,
                  alarmType:16,
          alarmTypeStr:"设备断线报警",
          callNum:"01002028002",
          channelName:"1000003",
          channelSeq:0,
          deviceCode:"1000003",
          deviceName:"园区1期2幢2单元单元联网控制器_02",
          handleStat:0,
          handleStatStr:"未处理",
          id:3276
				}],
        pageSize:10,
        totalPage:1,
        totalRows:1

      },
      logOpendoorForm:{
        pageNum:1,
        pageSize:20,
        deviceCode:'',
        openTypes:'',
        cardNumber:'',
        startTime:'',
        entTime:'' 
      },
      logOpendoorResult:{
        currentPage:1,
	      pageData:[{
	       cardNumber:"DD323A5B",
			   cardType:"0",
			   channelName:"1000021",
			   channelSeq:0,
			   deviceCode:"1000021",
         deviceName:"园区1期2幢1单元别墅机_01",
			   deviceType:2,
			   id:382,
			   openResult:"1",
			   openResultStr:"开门",
         openType:51,
			   openTypeStr:"合法刷卡",
			   operateTime:"2016-12-16 14:44:31",
			   ownerCode:"009001002001",
			   swipeId:1,
			   swipeName:"zxl",
			   swipeTime:"2016-12-16 14:44:31",
			   unitSeq:0
			  }],
      pageSize:10,
      totalPage:1,
      totalRows:4

      },
      logTalkForm:{
        pageNum:1,
        pageSize:20,
        callNum:'',
        endState:0,
        callType:0,
        startTime:'',
        entTime:'' 
      },
      logTalkResult:{
        currentPage: 1,
        pageData: [{
          id:2345656,
          callingParty:'',
          calledParty:'',
          callTime:'2016-12-16 14:44:31',
          endState:1,
          endStateStr:'',
          picturePath:'',
          recordId:'',
          deviceName:'',
          status:1,
          secTalkTime:525
        }],
        pageSize: 20,
        totalPage: 0,
        totalRows: 0

      }
    }
  }
}
</script>

<style scoped>

</style>